import React, { useState, useEffect } from 'react'
import {
    Space,Upload,
    Table, Tag, Button, Modal, Select,
    Radio, Form, Input, Checkbox
} from 'antd';
import { AudioOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import {url} from "../../../services/index"
import { getCommodityById } from '../../../services/commodity'


export default function List(props) {
    const { Column } = Table;
    const { Search } = Input;
    const { confirm } = Modal;
    const { Option } = Select;
    const [form] = Form.useForm();
    const [updateform] = Form.useForm();

    const [_id, setid] = useState('')
    const [updateObj, setUpdateObj] = useState({})
    const [type, setType] = useState('')

    const [typeId, setTypeId] = useState(-1)
    const [typeId2, setTypeId2] = useState(-1)

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isUpdateOpen, setIsUpdateOpen] = useState(false);

    const [imageUrl, setImageUrl] = useState();
    const [loading, setLoading] = useState(false);
    //搜索
    const onSearch = (value) => {
        console.log(type, value)
        props.toSearch(type, value)
    };
    const handleChange = value => setType(value)
    //增加
    const handleAdd = () => {
        setIsModalOpen(true);
    }
    const handleOk = () => {
        console.log('typeId',typeId)
        props.toAdd({...form.getFieldsValue(),image:imageUrl,typeId});
        setIsModalOpen(false);
        setImageUrl()
        form.setFieldsValue({name:"",intro:"",image:imageUrl,price:'',inventory:'',type:''});
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    //点击确认后预览图片
    const handleChangeImage = (info) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            console.log(info.file.response.filename);
            setLoading(false);
            setImageUrl(info.file.response.filename);
        }
    }
    const handleChangeImage2 = (info) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            console.log(info.file.response.filename);
            setLoading(false);
            setUpdateObj({...updateObj,image:info.file.response.filename});
            setImageUrl(info.file.response.filename);
        }
    }
    //修改
    useEffect(() => {
        updateform.setFieldsValue(updateObj)
    }, [updateObj._id])

    const handleUpdate = (record) => {
        setUpdateObj(record)
        setIsUpdateOpen(true);
    }
    const updateOk = () => {
        console.log('test',{ ...updateform.getFieldsValue(), _id: updateObj._id ,image:imageUrl,typeId:typeId2})
        props.toUpdate({ ...updateform.getFieldsValue(), _id: updateObj._id ,image:imageUrl,typeId:typeId2})
        setIsUpdateOpen(false);
    };
    const updateCancel = () => {
        setIsUpdateOpen(false);
    };
    //删除
    const handleDelete = (_id) => {
        console.log(_id)
        confirm({
            title: '删除',
            icon: <ExclamationCircleOutlined />,
            content: '确定删除该商品的信息吗?',
            onOk() {
                props.toDelete(_id)
            }
        });
    }
    //分页
    const changePage = (pagination) => {
        console.log(pagination.current,pagination.pageSize)
        props.show({
            curPage:pagination.current,
            pageSize:pagination.pageSize
        });
    }

    return (
        <>
            <Button type="primary" onClick={handleAdd}>添加商品</Button>
            <Modal title="添加商品" open={isModalOpen} onOk={handleOk}
                onCancel={handleCancel} okText='确认' cancelText='取消' destroyOnClose={true}>
                <Form
                    form={form}
                    name="addForm"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    autoComplete="off"
                >

                    <Form.Item
                        label="商品名"
                        name="name"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="描述"
                        name="intro"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="价格"
                        name="price"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="库存"
                        name="inventory"
                    ><Input />
                    </Form.Item>
                    <Form.Item
                        label="类型"
                        name="type"
                    >
                        <Select
                            defaultValue=" "
                            style={{
                                width: 150,
                            }}
                            onChange={(_,f) => {setTypeId(f.id)}}
                        >
                            <Option value="“咖啡搭子”组合" id={1}>“咖啡搭子”组合</Option>
                            <Option value="包装食品饮品" id={2}>包装食品饮品</Option>
                            <Option value="茶瓦纳" id={3}>茶瓦纳</Option>
                            <Option value="蛋糕&星享小点" id={4}>蛋糕&星享小点</Option>
                            <Option value="当季新品" id={5}>当季新品</Option>
                            <Option value="烘焙&三明治" id={6}>烘焙&三明治</Option>
                            <Option value="经典咖啡" id={7}>经典咖啡</Option>
                            <Option value="巧克力&其他饮品" id={8}>巧克力&其他饮品</Option>
                            <Option value="星巴克必点" id={9}>星巴克必点</Option>
                            <Option value="星冰乐&冰淇淋" id={10}>星冰乐&冰淇淋</Option>
                            <Option value="星膳食" id={11}>星膳食</Option>
                            <Option value="在家做咖啡" id={12}>在家做咖啡</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="类型2"
                        name="status"
                    >
                            <Radio.Group>
                                <Radio value={'1'}>饮品类</Radio>
                                <Radio value={'2'}>食品类</Radio>
                                </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="商品图片"
                        name="image"
                    >
                        <Upload
                            name="file"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action={url + "/upload"}
                            // beforeUpload={beforeUpload}
                            onChange={handleChangeImage}
                        >
                            {imageUrl ? (
                                <img
                                    src={"http://localhost:3000/images/" + imageUrl}
                                    alt="file"
                                    style={{
                                        width: '100%',
                                    }}
                                />
                            ) : (
                                <div>
                                    {loading ? <LoadingOutlined /> : <PlusOutlined />}
                                    <div style={{ marginTop: 8 }}>Upload</div>
                                </div>
                            )}
                        </Upload>
                    </Form.Item>
                </Form>
            </Modal>
            <Modal title="修改商品" open={isUpdateOpen} onOk={updateOk} forceRender={true}
                onCancel={updateCancel} okText='确认' cancelText='取消' destroyOnClose={true}>
                <Form
                    form={updateform}
                    name="addForm"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="商品名"
                        name="name"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="描述"
                        name="intro"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="价格"
                        name="price"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="库存"
                        name="inventory"
                    ><Input />
                    </Form.Item>
                    <Form.Item
                        label="类型"
                        name="type"
                    >
                        <Select
                            defaultValue=" "
                            style={{
                                width: 150,
                            }}
                            onChange = {(_,f) => {setTypeId2(f.id)}}
                        >
                            <Option value="“咖啡搭子”组合" id={1}>“咖啡搭子”组合</Option>
                            <Option value="包装食品饮品" id={2}>包装食品饮品</Option>
                            <Option value="茶瓦纳" id={3}>茶瓦纳</Option>
                            <Option value="蛋糕&星享小点" id={4}>蛋糕&星享小点</Option>
                            <Option value="当季新品" id={5}>当季新品</Option>
                            <Option value="烘焙&三明治" id={6}>烘焙&三明治</Option>
                            <Option value="经典咖啡" id={7}>经典咖啡</Option>
                            <Option value="巧克力&其他饮品" id={8}>巧克力&其他饮品</Option>
                            <Option value="星巴克必点" id={9}>星巴克必点</Option>
                            <Option value="星冰乐&冰淇淋" id={10}>星冰乐&冰淇淋</Option>
                            <Option value="星膳食" id={11}>星膳食</Option>
                            <Option value="在家做咖啡" id={12}>在家做咖啡</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="类型2"
                        name="status"
                    >
                            <Radio.Group>
                                <Radio value={'1'}>饮品类</Radio>
                                <Radio value={'2'}>食品类</Radio>
                                </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="商品图片"
                        name="image"
                    >
                        <Upload
                            name="file"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action={url + "/upload"}
                            onChange={handleChangeImage2}
                        >
                            {updateObj.image ? (
                                <img
                                    src={"http://localhost:3000/images/" + updateObj.image}
                                    alt="file"
                                    style={{
                                        width: '100%',
                                        height: '100%'
                                    }}
                                />
                            ) : (
                                <div>
                                    {loading ? <LoadingOutlined /> : <PlusOutlined />}
                                    <div style={{ marginTop: 8 }}>Upload</div>
                                </div>
                            )}
                        </Upload>
                    </Form.Item>
                </Form>
            </Modal>
            <Select
                defaultValue="全部"
                style={{ width: 100, }}
                onChange={handleChange}
            >
                <Option value="">搜索所有</Option>
                <Option value="name">商品名称</Option>
                <Option value="type">商品类别</Option>
                <Option value="price">商品价格</Option>
            </Select>
            <Search
                placeholder="请输入您要搜索的内容..."
                allowClear
                onSearch={onSearch}
                style={{
                    width: 280,
                }}
            />
            <Table dataSource={props.commodityArr} rowKey="_id"
                pagination={props.pagination} onChange={changePage}>
                <Column title="商品名" dataIndex="name" align='center' />
                <Column title="图片" dataIndex="image" align='center' render={(_,b)=> <img style={{width:'80px'}} src={url+'/images/'+b.image}/> }/>
                <Column title="描述" dataIndex="intro" align='center' />
                <Column title="库存" dataIndex="inventory" align='center' />
                <Column title="价格" dataIndex="price" align='center' />
                <Column title="类别" dataIndex="type" align='center' />
                <Column
                    title="操作"
                    align='center'
                    key="action"
                    render={(_, record) => (
                        <Space size="middle">
                            <Button type="primary" onClick={() => handleUpdate(record)}>修改</Button>
                            <Button type="primary" danger onClick={() => handleDelete(record._id)}>
                                删除
                            </Button>
                        </Space>
                    )}
                />
            </Table>
        </>
    )
}
